<template>
  <div class="comTable special">
    <el-table
      ref="tableRef"
      v-bind="$attrs"
      v-loading="loading"
      :data="tableData"
      class="table"
      :header-cell-style="{
        textAlign: 'center',
        backgroundColor: props.headBackground,
        color: '#333333',
        height: props.headHeight + 'px',
        whiteSpace: 'nowrap',
      }"
      border
      :cell-style="{ textAlign: 'center' }"
      :height="props.tableHeight"
      :cell-class-name="tableCellClassName"
      @cell-click="changeBg"
    >
      <!-- 是否展示多选 -->
      <el-table-column v-if="props.showSelection" type="selection" width="55" />

      <!-- 是否展示序号 -->
      <el-table-column v-if="props.showIndex" type="index" width="60">
        <template #default="{ $index }">
          {{ getIndex($index) }}
        </template>
      </el-table-column>

      <el-table-column
        v-for="col in tableHeaders"
        :key="col.fieldCode"
        :label="col.fieldCode"
      >
        <el-table-column
          :prop="col.fieldCode"
          :label="col.fieldName"
          :width="getColumnWidth(col.fieldCode)"
          show-overflow-tooltip
        ></el-table-column>
      </el-table-column>
    </el-table>
    <div v-if="props.showPage" class="pagination">
      <el-pagination
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="pageSizes"
        :current-page="pageInfo.pageIndex"
        :page-size="pageInfo.pageSize"
        :total="total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
// 动态表头表格  -----name
import { ref } from "vue";

let tableData = ref([]);
let loading = ref(false);
let pageSizes = ref([10, 20, 30, 50]);
let total = ref(0);
let backupParams = ref(null);
let backupCallBack = ref(null);
let pageInfo = ref({ pageIndex: 1, pageSize: 10 }); // 备份
const tableHeaders = ref([]);
// 父组件参数
const props = defineProps({
  // 是否显示多选
  showSelection: {
    type: Boolean,
    default: false,
  },
  // 是否显示序号
  showIndex: {
    type: Boolean,
    default: true,
  },
  // 是否显示分页
  showPage: {
    type: Boolean,
    default: true,
  },
  // 表格高度
  tableHeight: {
    type: String,
    default: " ",
  },
  // 表格头部颜色
  headBackground: {
    type: String,
    default: "#F7F8FA",
  },
  // 表格头部高度
  headHeight: {
    type: String,
    default: "36",
  },
  pageInfo: {
    type: Object,
    default: () => {
      return { pageIndex: 1, pageSize: 10 };
    },
  },
});

// 父组件 需要调用的方法
const load = (option, callBack, page) => {
  loading.value = true;
  tableData.value = [];
  option.params = option.params || {};
  backupParams.value = option;
  backupCallBack.value = callBack;
  if (page && typeof page == "number") {
    pageInfo.value.pageIndex = page;
  } else {
    pageInfo.value.pageIndex = 1;
  }

  let P = {
    ...option.params,
    ...pageInfo.value,
    pageNum: pageInfo.value.pageIndex,
  };
  if (props.showPage === false) {
    P = { ...option.params, pageIndex: null, pageSize: null };
  }
  if (option.api) {
    option
      .api(P)
      .then(res => {
        loading.value = false;
        if (res) {
          tableHeaders.value = res.tableHeaders;
          let datas = res.tableDataPages;
          datas.records = datas.records.map(item => {
            let values = item.data;
            let row = {};
            res.tableHeaders.forEach((head, ind) => {
              row[head.fieldCode] = values[ind];
            });
            return row;
          });
          console.log(datas.records);
          // 分页总数
          total.value = datas.total;
          tableData.value = datas.records;
          tableData.value.forEach(item => {
            let keys = Object.keys(item);
            keys.forEach(key => {
              if (item[key] === "-1" || item[key] === "null") {
                item[key] = "--";
              }
            });
          });
          callBack && callBack(datas);
        }
      })
      .catch(err => {
        console.log(err);
        // 此处仅为以后某些改动的容错处理
        loading.value = false;
      });
  } else {
    loading.value = false;
    // $message.error("api 无效");
  }
};

function getColumnWidth(code) {
  let length = code.length * 12 + 30;
  return length > 120 ? length : 120;
}
function getIndex(index) {
  return (pageInfo.value.pageIndex - 1) * pageInfo.value.pageSize + index + 1;
}
// 临时存放选中表格的数组
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  row.index = rowIndex;
  column.index = columnIndex;
};

// 假数据
const falseData = val => {
  tableData.value = val;
};
// load();
// 选择页数
const currentChange = page => {
  pageInfo.value.pageIndex = page;
  load(backupParams.value, backupCallBack.value, page);
};
// // pageSize 改变
const sizeChange = num => {
  pageInfo.value.pageSize = num;
  load(backupParams.value, backupCallBack.value);
};

// 暴露 子组件方法
defineExpose({ falseData, load });
</script>

<style lang="scss" scoped>
.comTable {
  padding: 24px;
  flex: 1;
  overflow: auto;
  background: #ffffff;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    width: 100%;
    height: 100%;
    :deep(.cell) {
      .el-button:nth-of-type(n + 2) {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: -7px;
          top: 50%;
          transform: translateY(-50%);
          width: 2px;
          height: 14px;
          background: #ebedee;
        }
      }
    }
  }
  :deep(.el-table) {
    .el-table__inner-wrapper {
      .el-table__body-wrapper {
        .el-scrollbar {
          .el-scrollbar__wrap {
            .el-scrollbar__view {
              .el-table__body {
                tbody {
                  .el-table__row {
                    td {
                      padding: 8px 8px;
                      .cell {
                        height: 30px;
                        line-height: 30px;
                        border-radius: 4px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .el-table__header-wrapper {
        .el-table__header {
          thead {
            tr {
              height: 50px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.pagination {
  height: 60px;
  :deep(.el-pagination) {
    margin-top: 20px;
    justify-content: flex-end;
    .el-pager {
      .number {
        height: 32px;
        background-color: #ffffff;
        border: 1px solid #dcdee0;
        border-radius: 2px;
        color: #323233;
        font-size: 14px;
      }
      .is-active {
        background-color: #2780fb;
        color: #ffffff;
        border: none;
      }
    }
    .el-pagination__jump {
      .el-input {
        width: 44px;
        min-width: 44px;
        .el-input__wrapper {
          border: 1px solid #dcdee0;
          box-shadow: none;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>
